import React, { Component } from 'react';
import {nanoid} from "nanoid";
import {connect} from "react-redux";

import {createAddPersonAction} from "../../redux/actions/person.js";

class Person extends Component {
    addPerson=()=>{
        const name=this.nameNode.value;
        const age=this.ageNode.value;
        const personObj={id:nanoid(),name,age};
        this.props.jiayiren(personObj);
        this.nameNode.value="";
        this.ageNode.value="";
    };
    render() {
        return (
            <div>
                <h1>我是Person组件,上方组件的求和为{this.props.he}</h1>
                <input ref={(c)=>{return this.nameNode=c}} type="text" placeholder="输入姓名" />
                <input ref={(c)=>{return this.ageNode=c}} type="text" placeholder="输入年龄" />
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.yiduiren.map((item)=>{
                            return <li key={item.id}>{item.name}--{item.age}</li>
                        })
                    }
                </ul>
            </div>
        );
    };
};

export default connect(
    (state)=>{
        return {
            yiduiren:state.rens,
            he:state.he
        }
    },
    {
        jiayiren:createAddPersonAction
    }
)(Person);
